<template>
	<view class="mainpadding beijingse" v-if="pageShow">
		<!-- 无地址 -->
		<view class=" ffffff radius flexcenter" style="padding:60rpx ;" v-if="addressData==null&&buy_type!=1"
			@click="tzshdz">
			<view class="xiaocheng titletext fonweight textcenter">点击添加收货地址</view>
		</view>
		<!-- 有地址 -->
		<view class="mainpadding ffffff radius flexbetween" v-if="addressData!=null&&buy_type!=1" @click="tzshdz">
			<view class="">
				<view class="flexleft">
					<view class="titletext fonweight xiaohei margin_right4">{{addressData.name}}</view>
					<view class="titletext fonweight xiaohei">{{addressData.mobile}}</view>
				</view>
				<view class="ershil xiaohui margin_top2">{{addressData.cityinfo}}{{addressData.address_detail}}</view>
			</view>
			<u-icon name="arrow-right" color="#999999"></u-icon>
		</view>
		<view class="mainpadding ffffff radius margin_top" v-for="item in orderData.lists" :key="item.goodsinfo.id">
			<view class="flexbetween ">
				<view class="sptp">
					<image class="" :src="item.goodsinfo.image_text" mode=""></image>
				</view>
				<view class="" style="width: 65%;">
					<view class="titletext xiaohei yhxk">{{item.goodsinfo.title}}</view>
					<view class="strongtext xiaohei margin_top yhxk">{{item.goodsinfo.sku.difference.join()}}</view>
					<view class="flexbetween margin_top">
						<view class="bigtext fonweight xiaocheng ">¥{{item.goodsinfo.sku.price}}</view>
						<view class="ershil fonweight xiaohui ">×{{item.number}}</view>
					</view>
				</view>
			</view>
			<view class="flexbetween margin_top">
				<view class="ershil fonweight xiaohei ">取件方式</view>
				<view class="ershil fonweight xiaohong" style="display: flex;align-items: center;">
					<view style='padding:5rpx 10rpx;background:#FF6134;color:#fff;' @click='buyTypeFun(1)'
						:class="buy_type==1?'':'active'">自提</view>
					<view style='padding:5rpx 10rpx;background:#FF6134;color:#fff;' @click='buyTypeFun(2)'
						:class="buy_type==1?'active':''">快递</view>
				</view>
			</view>
			<view class="flexbetween margin_top" v-if="buy_type!=1">
				<view class="ershil fonweight xiaohei ">运费</view>
				<view class="ershil fonweight xiaohong ">{{Number(orderData.statis.freight_price) || "包邮"}}</view>
			</view>

		</view>

		<!-- 备注 -->
		<view class="ffffff margin_top radius mainpadding">
			<view class="ershil fonweight xiaohei ">备注</view>
			<textarea class="margin_top2 textarea" placeholder="请输入留言信息给卖家" v-model="remarks"></textarea>
		</view>
		<view class="ffffff margin_top radius flexbetween mainpadding" v-if="buy_type!=1">
			<view class="ershil fonweight xiaohei ">运费合计</view>
			<view class="ershil fonweight xiaohong ">{{Number(orderData.statis.freight_price) || "包邮"}}</view>
		</view>
		<!-- 固定底部 -->
		<view class="gudingdb ffffff mainpadding">
			<view class="flexbetween">
				<view class="titletext xiaohei">合计：
					<text class="bigtext xiaocheng fonweight">¥{{orderData.statis.pay_price}}
						<text
							v-show="Number(orderData.statis.freight_price)">+运费{{orderData.statis.freight_price}}</text></text>
				</view>
				<!-- <view class="libtn flexcenter" @click="pay">立即支付</view> -->
				<view class="libtn flexcenter" @click="pay">上传支付凭证</view>
			</view>
		</view>

		<u-popup :show="payShow" @close="close" mode="bottom">
			<view>
				<view style="width: 750rpx;padding: 30rpx;">
					<view style="font-size: 30rpx;font-weight: 500;">支付凭证</view>
					<view style="margin: 30rpx 145rpx;width: 400rpx;">
						<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
							:maxCount="1" :previewFullImage="false"></u-upload>
					</view>
					<view @click="submitFun"
						style="width: 690rpx;height: 80rpx;background-color: #FF6134;color: #fff;font-size: 35rpx;font-weight: 500;display: flex;justify-content: center;align-items: center;border-radius: 24rpx;">
						提交</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				lastmsg: {
					type: '', //detail=商品详情,cart=购物车
					order_type: "", //1=大礼包,2=普通商品,3=积分商品
					data: [],
				},
				remarks: "",
				addressid: "",
				orderData: {},
				addressData: {},
				pageShow: false,
				buy_type: 1,
				payShow: false,
				fileList1: [],
				orderId: ''
			}
		},
		onLoad(options) {
			this.lastmsg = JSON.parse(decodeURIComponent(options.msg));
		},
		onShow() {
			uni.$off('checkAddressId')
			uni.$on('checkAddressId', data => {
				this.addressid = data
				console.log(data, 999);
			})
			this.getdingdan()
		},
		methods: {
			buyTypeFun(v){
				this.buy_type = v
				this.getdingdan()
			},
			submitFun() {
				if (this.fileList1.length == 0) {
					httpRequest.toast("请上传图片")
					return
				}
				if(!this.orderId){
					httpRequest.toast("未获取到支付订单id")
					return
				}
				// console.log(this.fileList1[0].url,this.orderId)
				// return;
				httpRequest.request("/api/order/uploadPayImage", 'POST', {
					order_id: this.orderId,
					pay_image: this.fileList1[0].url
				}, false, false, true).then(res => {
					// uni.hideLoading()
					if (res.code == 1) {
						uni.navigateTo({
							url:'/pages_mypage/lipindd?i=0'
						})
					} else {
						httpRequest.toast(res.msg);
					}
				})
			},
			pay() {
				if (this.addressid == "") {
					httpRequest.toast("请选择地址")
					return
				}
				uni.showLoading({
					title: '请稍候...'
				})
				let data = {
					buy_type: this.buy_type,
					address_id: this.addressid, //地址ID
					order_type: this.lastmsg.order_type, //1=大礼包,2=普通商品,3=积分商品
					data: this.lastmsg.data, //数据列表
					remarks: this.remarks,
				}
				httpRequest.request("/api/order/addOrder", 'POST', data, false, false, true).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						// if (this.lastmsg.type == "cart") {
						// 	this.delcar()
						// }
						// let data = {
						// 	pay_price:res.data.pay_price,
						// 	type:this.lastmsg.order_type,//1=大礼包,2=普通商品,3=积分商品
						// 	order_id:res.data.order_id
						// }
						// if(this.lastmsg.order_type==3){
						// 	this.$set(data,'freight_price',this.orderData.statis.freight_price)
						// }
						// uni.redirectTo({
						// 	url:"/pages_homepage/zhifu?msg="+encodeURIComponent(JSON.stringify(data))
						// })
						this.orderId = res.data.order_id
						this.payShow = true
					} else {
						httpRequest.toast(res.msg);
					}
				}).catch(err => {
					uni.hideLoading()
					httpRequest.toast(err.msg);
				})
			},
			delcar() {
				let arr = this.lastmsg.data
				arr.forEach(item => {
					delete item.number
				})
				httpRequest.request('/api/cart/delCart', 'POST', {
					data: arr,
					data_type: this.lastmsg.ly
				}).then(res => {})
			},
			getdingdan() {
				let data = {
					buy_type: this.buy_type,
					address_id: this.addressid, //地址ID
					order_type: this.lastmsg.order_type, //来源类型detail详情，car购物车
					coupon_id: "",
					data: this.lastmsg.data, //数据列表
				}
				httpRequest.request("/api/order/getOrderGoodsList", 'POST', data, false, false, true).then(res => {
					if (res.code == 1) {
						this.orderData = res.data.orderData
						this.addressData = res.data.addressData
						if (res.data.addressData) {
							this.addressid = res.data.addressData.id
						}
						this.pageShow = true
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			// 跳转收货地址
			tzshdz() {
				uni.navigateTo({
					url: '/pages_homepage/shouhuodizhi?type=1'
				})
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: "success",
							message: "",
							url: result,
						})
					);
					fileListLen++;
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: "https://adminh5.jiankanzhiyuan.com/api/common/upload", // 仅为示例，非真实的接口地址
						filePath: url,
						name: "file",
						formData: {
							user: "test",
						},
						success: (res) => {
							setTimeout(() => {
								resolve(JSON.parse(res.data).data.fullurl);
							}, 1000);
						},
					});
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.libtn {
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		width: 250rpx;
		height: 76rpx;
		background: #FF9341;
		border-radius: 120rpx 120rpx 120rpx 120rpx;
	}

	.textarea {
		height: 100rpx;
	}

	.sptp {
		min-width: 180rpx;
		width: 180rpx;
		height: 180rpx;
		border-radius: 14rpx;
		margin-right: 30rpx;

		image {
			border-radius: 14rpx;
			width: 100%;
			height: 100%;
		}
	}

	.active {
		background-color: #c5c4c4 !important;
	}

	/deep/.u-upload__button {
		height: 400rpx !important;
		width: 400rpx !important;
	}

	/deep/.u-upload__wrap__preview__image {
		height: 400rpx !important;
		width: 400rpx !important;
	}
</style>